<template>
  <div class="broDetail">
      <header>

      </header>
      <div class="main">
          <div class="main_left">
              <p>{{obj.tname}}</p>
              <h2>{{obj.cname}}</h2>
              <p> 
                <img src="https://images.sqfcw.com/images/icon/agent/tel@2x.png" alt="">
                <span>{{obj.tel}}</span>
              </p>
              <p>
                <img src="https://images.sqfcw.com/images/icon/agent/address@2x.png" alt="">
                <span>{{obj.address}}</span>
              </p>
          </div>
          <div class="keyLines"></div>
          <div class="main_right">
              <img :src="obj.img" alt="">
          </div>
      </div>
      <div class="content">
          <div class="content_head">
              <div>
                <h2>二手房</h2>
                <span>租房</span>
              </div>
              <p>
                房源：<span>42</span>
              </p>
          </div>
          <div class="content_main">
              <dl v-for="(item) in list" :key="item.id">
                  <dt>
                      <img :src="item.img" alt="">
                  </dt>
                  <dd>
                      <h3>{{item.title}}</h3>
                      <p>
                          <span>两室两厅一卫|{{item.mianji}}㎡</span>
                          <span>{{item.cmname}}</span>
                      </p>
                      <div>
                          <p>
                              <b>{{item.fangjia}}万</b>
                              <span>{{item.danjia}}元/㎡</span>
                          </p>
                          <p>
                              {{Math.floor((new Date().getTime() - 1*new Date(item.utime))/1000/60/60)}}小时之前
                          </p>
                      </div>
                  </dd>
              </dl>
          </div>
      </div>
      <div class="footer">
          <p>
              <button open-type='share'>
                <i class="iconfont icon-fenxiang"></i>
              </button>
          </p>
        
          <p @click="bounced">
              <i class="iconfont icon-weixin"></i>
              微信
          </p>
          
          <div>
            <span>在线咨询</span>
            <span @click="goCall">电话咨询</span>
          </div>
      </div>
      <div class="Obscuration" v-if="flag">
          <div>
              <span @click="bounced">x</span>
              <img :src="obj.wechat_img" alt="">
              <p>长按保存到相册</p>
          </div>
      </div>
  </div>
</template>

<script>
import {getHomeBroker} from '../../../mock/home/index';
import {getBrokerDetail} from '../../../mock/home/index';
import '../../../g_icon/111/iconfont.css';
export default {
    data() {
        return {
            id:'',
            obj:{},
            list:[],
            flag:false
        }
    },
    onLoad(options){
        this.id = options.id;
    },
    mounted() {
        let res = getHomeBroker();
        this.obj = res.filter(item=>item.id == this.id)[0];
        this.list = getBrokerDetail();
    },
    methods: {
        // 蒙层
        bounced(){
            this.flag = !this.flag;
        },
        // 打电话
        goCall(){
            wx.makePhoneCall({
                phoneNumber: '10086' //仅为示例，并非真实的电话号码
            })
        }
    },
    
}
</script>

<style lang="scss" scoped>
.broDetail{
    width: 100%;
    height: 100%;
    position: relative;
    header{
        width: 100%;
        height: 364rpx;
        background: linear-gradient(125deg,#f50,#ffa402);
    }
    .main{
        width: 654rpx;
        height: 340rpx;
        display: flex;
        position: absolute;
        left: 50rpx;
        top: 180rpx;
        background: white;
        border: solid 2rpx #ccc;
        border-radius: 28rpx;
        .main_left{
            width: 354rpx;
            height: 340rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20rpx;
            h2{
                width: 100%;
            }
            p{
                width: 100%;
                display: flex;
                img{
                    width: 40rpx;
                    height: 40rpx;
                }
            }
        }
        .keyLines{
            width: 76rpx;
            height: 342rpx;
            margin-top: -1px;
            background: #ff6700;
            -webkit-clip-path: polygon(0 0,4rpx 0,76rpx 100%,72rpx 100%);
            clip-path: polygon(0 0,4rpx 0,76rpx 100%,72rpx 100%);
            margin-right: -76rpx;
            z-index: 2;
        }
        .main_right{
            width: 300rpx;
            height: 342rpx;
            position: relative;
            margin-right: -2rpx;
            margin-top: -2rpx;
            vertical-align: bottom;
            -webkit-clip-path: polygon(0 0,100% 0,100% 100%,76rpx 100%);
            clip-path: polygon(0 0,100% 0,100% 100%,76rpx 100%);
            img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 28rpx;
                border-bottom-right-radius: 28rpx;
            }
        }
    }
    .content{
        width: 100%;
        height: 480rpx;
        margin-top: 200rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        overflow: auto;
        .content_head{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div{
                display: flex;
                align-items: center;
                h2{
                    margin-right: 20rpx;
                    font-weight: bolder;
                    font-size: 36rpx;
                }
                font-size: 28rpx;
            }
            >p{
                font-size: 24rpx;
                color: #ccc;
                span{
                    color: black;
                }
            }
        }
        .content_main{
            width: 100%;
            height: 170rpx;
            dl{
                width: 100%;
                height: 100%;
                display: flex;
                margin-top: 20rpx;
                dt{
                    img{
                        width: 170rpx;
                        height: 170rpx;
                    }
                }
                dd{
                    width: 500rpx;
                    margin-left: 20rpx;
                    h3{
                        height: 70rpx;
                        font-size: 36rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
						white-space:nowrap;
                    }
                    >p{
                        width: 100%;
                        height: 50rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 24rpx;
                    }
                    >div{
                        width: 100%;
                        height: 50rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 24rpx;
                        >p{
                            display: flex;
                            align-items: center;
                            b{
                                color: #fb656a;
                                font-size: 32rpx;
                                margin-right: 14rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    .footer{
        width: 100%;
        height: 110rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #fff;
        font-size: 32rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        >p{
            width: 80rpx;
            text-align: center;
        }
        button{
            width: 40px;
            height: 40px;
        }
        div{
            span{
                display: inline-block;
                height: 80rpx;
                width: 196rpx;
                text-align: center;
                line-height: 80rpx;
                color: white;
            }
            span:nth-child(1){
                background: #fbac65;
                border-top-left-radius: 40rpx;
                border-bottom-left-radius: 40rpx;
            }
            span:nth-child(2){
                background: linear-gradient(90deg,#fb656a,#fbac65);
                border-top-right-radius: 40rpx;
                border-bottom-right-radius: 40rpx;
            }
        }
    }
    // 蒙层
    .Obscuration{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        div{
            width: 70%;
            height: 50%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            // justify-content: space-between;
            justify-content: space-around;
            align-items: center;
            background: white;
            span{
                width: 90%;
                text-align: right;
            }
            img{
                width: 75%;
                height: 62%;
            }
            p{
                width: 90%;
                height: 70rpx;
                background-color: #ff656b;
                color: white;
                text-align: center;
                line-height: 70rpx;
                border-radius: 10rpx;
            }
        }
    }
}
</style>